<template>

<div>
    <input type="text" v-model="searchdata.code" placeholder="项目编码"/>
    <input type="text" v-model="searchdata.name" placeholder="项目名称"/>
    <button @click="findparams">查询</button>
    <br />
    <table>
        <tr>
            <th>项目编码</th>
             <th>项目名称</th>
             <th>项目备注</th>
             <th>操作</th>
             <th>操作</th>
             <th>操作</th>
             <th>操作</th>
        </tr>

        <!--
           :key="这个检查项的主键"

        -->
        <tr v-for="ck in list" :key="ck.id">
            <td>{{ck.code}}</td>
            <td>{{ck.name}}</td>
            <td>{{ck.remark}}</td>
            <td>
                <button>编辑</button>
                <button>删除</button>
            </td>
        </tr>
    </table>
</div>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue'

// 必须导入你所用的js
import {chaxun,chasuoyou } from '@/api/list.js'

var list=ref([]);// 定义一个数组变量
var searchdata=ref({
  code:'',
  name:''
});

// 点击查询按钮
var findparams=async()=>{
    // 虽然我们发送的是异步请求 但是我会等待结果回来我再走下一步
  let shuju = await chaxun(searchdata);
 console.log(shuju);
  list.value=shuju;
}




// 查询所有的方法
var xx=async()=>{
    // 虽然我们发送的是异步请求 但是我会等待结果回来我再走下一步
  let shuju = await chasuoyou();
 
 
  list.value=shuju;
}



// 钩子函数
onMounted(()=>{
   xx();
})

</script>


<style   scoped>

</style>